import { dom } from '@knno/dom';
import { button } from '@knno/ui/button';
import { checkbox } from '@knno/ui/checkbox';
import { radio } from '@knno/ui/radio';
import { vars } from '@knno/ui/global.css';
import { Grid, grid } from '@knno/ui/grid';
import { Input, input } from '@knno/ui/input';
import { bar } from './index.css';
import { genText } from './utils';

export function renderGrid() {
	let tb: Grid;
	let fixColumnInput: Input;

	function addColumns() {
		tb.columns([
			{ title: '列1', key: 0, align: 'center', sortable: true, width: '200px', resizable: true },
			{ title: '列2', key: 1, sortable: true, width: '10%', resizable: true },
			{ title: '列3', key: 2, align: 'right', width: '10%', resizable: true },
			{ title: '列4', key: 3, width: '10%' },
			{ title: '列5', key: 4, width: '10%' },
			{ title: '列6', key: 4, width: '15%', resizable: true },
			{ title: '列7', key: 4, width: '15%', resizable: true },
		]);
	}

	function addData() {
		const result = [];
		let sum = 0;
		for (let i = 1; i <= 100000; i++) {
			sum += i;
			const row = [];
			row.push(i + '');
			row.push(genText());
			for (let j = 1; j < 4; j++) {
				row.push('text content ' + j);
			}
			result.push(row);
			if (i % 100 === 0) {
				result.push({ section: '合计：' + sum });
			}
		}
		console.log('data generated!');
		tb.rows(result);
	}

	return [
		dom.h2().text('数据网格（数据超过100行以上的建议使用此控件）'),
		dom.div(bar).append(
			button().type('primary').text('添加表头').on('click', addColumns),
			button()
				.type('danger')
				.text('删除表头')
				.on('click', () => {
					tb.columns([]);
				}),
			button().type('primary').text('添加数据（10万行）').on('click', addData),
			button()
				.type('danger')
				.text('删除数据')
				.on('click', () => {
					tb.rows([]);
				}),
			dom.span().text(' | ').css('margin', '0 1rem'),
			input()
				.ref((i) => (fixColumnInput = i))
				.placeholder('固定列')
				.type('number')
				.css('width', '10rem'),
			button()
				.text('设置固定列')
				.on('click', () => {
					tb.fixColumns(parseInt((fixColumnInput.value() as string) ?? '0'));
				})
		),
		dom.div(bar).append(
			dom.span().text('排序：').css('color', vars.color.brand),
			radio()
				.group('grid-sort')
				.text('无')
				.checked(true)
				.on('click', () => tb.sortType('none')),
			radio()
				.group('grid-sort')
				.text('简单')
				.on('click', () => tb.sortType('simple')),
			radio()
				.group('grid-sort')
				.text('组合')
				.on('click', () => tb.sortType('combine')),
			dom.span().text('|').css('margin', '0 1rem'),
			dom.span().text('列宽：').css('color', vars.color.brand),
			radio()
				.group('grid-size')
				.text('自适应')
				.checked(true)
				.on('click', () => tb.columnSize('auto')),
			radio()
				.group('grid-size')
				.text('按比例分配')
				.on('click', () => tb.columnSize('scale')),
			radio()
				.group('grid-size')
				.text('绝对值')
				.on('click', () => tb.columnSize('fixed')),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.text('表格固定高度')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							tb.css('height', '800px');
						} else {
							tb.css('height', '');
						}
					});
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.text('始终显示列边框')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							tb.columnBorder(true);
						} else {
							tb.columnBorder(false);
						}
					});
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.checked(true)
				.text('显示表头')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							tb.headLine(true);
						} else {
							tb.headLine(false);
						}
					});
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.checked(false)
				.text('复选框')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							tb.selectable(true);
						} else {
							tb.selectable(false);
						}
					});
				}),
			dom.span().text('|').css('margin', '0 1rem'),
			checkbox()
				.checked(false)
				.text('行选择')
				.ref((ck) => {
					ck.on('click', () => {
						if (ck.checked()) {
							tb.activable(true);
						} else {
							tb.activable(false);
						}
					});
				})
		),
		grid()
			.section({
				key: 'section',
			})
			.ref((t) => {
				tb = t;
				// addColumns();
				// addData();
			})
			.on('rowclick', (evt) => {
				console.log(evt.detail);
			}),
	];
}
